import React, { FunctionComponent } from 'react';
import { Rate } from 'react-vant';
import styles from './index.less';
import dayjs from 'dayjs';

export interface IRecommendItem {
    avatar: string;
    score: number;
    rateTime: number;
    recommend: Array<string>;
    text: string;
    username: string;
}

const RecommendItem: FunctionComponent<IRecommendItem> = ({ avatar, score, rateTime, recommend, text, username }) => {
    return avatar ? (
        <div className={styles.recommend_item}>
            <img className={styles.recommend_item_img} src={avatar}></img>
            <div className={styles.recommend_item_content}>
                <div className={styles.recommend_item_content_name}>
                    <span>{username}</span>
                    {dayjs(rateTime).format('YYYY-MM-DD HH:mm:ss')}
                </div>
                <div className={styles.recommend_item_content_star}>
                    <Rate value={score}></Rate>
                </div>
                <div className={styles.recommend_item_content_text}>{text}</div>
                {
                    recommend.length ?
                        <div className={styles.recommend_item_content_card}>
                            <span>已购:</span>
                            {
                                recommend?.map((item, index) => (
                                    <div key={`card${index}`} className={styles.card}>{item}</div>
                                ))
                            }
                        </div> : null
                }
            </div>
        </div>
    ) : null
}

RecommendItem.defaultProps = {
    avatar: '', score: 0, rateTime: 0, recommend: [], text: '', username: ''
}

export default RecommendItem